<template>
  <view class="bg-1 p-t24 p-b4 p-r24 p-l4 industry-filter">
    <view class="tag-list">
      <view
        v-for="(tag, index) in list"
        :key="index"
        class="p-v20 m-b20 m-l20 flex-c tag"
        :class="[{ active: tag === selected }]"
        @click="select(tag)">
        <text>{{ tag }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const list = ref(['酒店', '餐饮', '互联网', '销售', '计算机', '房地产', '服装', '教育', '其他'])

  const selected = ref('')

  const select = (val: string) => {
    if (selected.value === val) return

    selected.value = val
  }
</script>

<style lang="scss" scoped>
	.tag-list {
		display: flex;
		flex-wrap: wrap;
	}
	.tag {
		height: 72rpx;
		padding: 0 20rpx;
		border-radius: 4rpx;
		font-size: 28rpx;
		color: $text-color-1;
		background-color: $bg-color-6;
		border: 1px solid transparent;
		&.active {
			font-weight: bold;
			color: $text-color-5;
			background-color: $bg-color-4;
			border-color: $border-color-1;
		}
	}
</style>
